<template>
  <div class="app">
    <h4>作用域插槽</h4>
    <div class="row">
      <Category>
        <template v-slot="parms">
          <ol>
          <li v-for="item in parms.gams" :key="item.id">{{ item.grams }}</li>
        </ol>  
        </template>
        </Category>

      <Category>
        <template v-slot="parms">
          <ul>
          <li v-for="item in parms.gams" :key="item.id">{{ item.grams }}</li>
        </ul>  
        </template>
      </Category>

      <Category>
        <!-- 解构parms   parms.gams -->
        <template v-slot="{gams}">
          <h3 v-for="item in gams" :key="item.id">{{ item.grams }}</h3 >
        </template>
      </Category>
    </div>
  </div>
</template>

<script setup lang="ts">
import Category from "./Category.vue";

</script>

<style scoped>
.app {
  background-color: #ccc;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px;
  .row {
    display: flex;
    justify-content: space-evenly;
  }
  img,
  video {
    width: 100%;
    object-fit: cover;
  }
}
</style>
